<template>
	<div class="component">
		<card v-for="(album, index) of list" :key="index"
					:image='album.picUrl'
					:imageWidth='60'
					:imageHeight='60'
					:title='album.name'
					:subTitle="album.publishTime + ' 歌曲 ' + album.size"
					direction='row'
					class="item"
		></card>
	</div>
</template>
<script>
import { album } from 'api/artist'
import Card from 'base/card'
import Album from '@/entity/Album'

export default {
	components: {
		Card
	},
	props: {
		id: [String, Number],
		pagination: Object
	},
	data() {
		return {
			list: [],
			promise: null
		}
	},
	methods: {
    getList() {
			if (!this.id) return
			const { limit, offset } = this.pagination
      this.promise = album(this.id, limit, offset).then(res => {
				this.list = this.list.concat(res.hotAlbums.map(item => new Album(item)))
				return res.hotAlbums
			})
			return this.promise
		}
	},
	watch: {
		id() {
			this.getList()
		}
	}
}
</script>
<style lang="less" scoped>
.component{
	width: 100%;
	min-height: 1px;
	.item{
		margin-bottom: 10px;
	}
}
</style>